<template>
	<view class="login">
		<view class="logo">
			<image :src="imgHost+'/static/images/logo.png'" mode="aspectFill"></image>
		</view>

		<!--APP登录-->
		<!-- #ifdef APP-PLUS-->
		<view class="form">
			<view class="form-item">
				<uni-icons type="icon-iconfontuser" custom-prefix="iconfont" size="24"
					:color="themeColor.theme"></uni-icons>
				<view class="form-input">
					<input v-model="form.mobile" style="padding: 0 32rpx" type="text" placeholder="请输入您的手机号" />
				</view>
			</view>
			<view class="form-item">
				<uni-icons type="icon-iconfonticon-mim" custom-prefix="iconfont" size="24"
					:color="themeColor.theme"></uni-icons>
				<view class="form-input">
					<input v-model="form.password" style="padding: 0 32rpx" type="password" placeholder="请输入您的密码" />
				</view>
			</view>

			<button :loading="loginButton" @click="login" class="submit-btn"
				:style="{background: themeColor.theme, color: '#fff'}">
				登录
			</button>

			<view class="login-img">
				<image class="img-item" :src="imgHost+'/static/images/icon/wx.png'" mode="aspectFill"
					@click="authorization('wx')"></image>
			</view>
			<view class="login-img">
				<image class="img-item" :src="imgHost+'/static/images/icon/zfb.png'" mode="aspectFill"
					@click="authorization('zfb')"></image>
			</view>
			<view class="login-img">
				<image class="img-item" :src="imgHost+'/static/images/icon/dy.png'" mode="aspectFill"
					@click="authorization('dy')"></image>
			</view>

			<view class="alink">
				<radio :checked="read" @click="setRead" />
				已阅读并同意
				<text @click="pageRoute(`/userPages/agreement/agreement?type=user`)">《用户协议》</text>
				<text @click="pageRoute(`/userPages/agreement/agreement?type=privacy`)">《隐私协议》</text>
			</view>

			<view class="btn-group">
				<view class="login-btn" @click="pageRoute('/userPages/login/forgot-password')">忘记密码</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/sms_login')">手机验证码登录</view>
			</view>
		</view>
		<!--  #endif -->

		<!--微信小程序登录-->
		<!-- #ifdef MP-WEIXIN -->
		<view class="form">
			<view v-if="is_mobile_login">
				<button class="u-button" open-type="getPhoneNumber" @getphonenumber="onGetPhoneNumber">手机号码快捷登录</button>
			</view>
			<view v-else>
				<button :loading="loginButton" class="u-button" @click="authorization"
					:style="{background: themeColor.theme, color: '#fff'}">一键授权登录</button>
			</view>

			<view class="alink">
				<radio :checked="read" @click="setRead" />
				已阅读并同意
				<text @click="pageRoute(`/userPages/agreement/agreement?type=user`)">《用户协议》</text>
				<text @click="pageRoute(`/userPages/agreement/agreement?type=privacy`)">《隐私协议》</text>
			</view>

			<view class="btn-group">
				<view class="login-btn" @click="pageRoute('/userPages/login/forgot-password')">忘记密码</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/pass_login')">账号密码登录</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/sms_login')">手机验证码登录</view>
			</view>
		</view>
		<!--  #endif -->

		<!--抖音小程序登录-->
		<!-- #ifdef MP-TOUTIAO -->
		<view class="form">
			<button :loading="loginButton" class="u-button" @click="authorization"
				:style="{background: themeColor.theme, color: '#fff'}">授权登录</button>

			<view class="alink">
				<radio :checked="read" @click="setRead" />
				已阅读并同意
				<text @click="pageRoute(`/userPages/agreement/agreement?type=user`)">《用户协议》</text>
				<text @click="pageRoute(`/userPages/agreement/agreement?type=privacy`)">《隐私协议》</text>
			</view>

			<view class="btn-group">
				<view class="login-btn" @click="pageRoute('/userPages/login/forgot-password')">忘记密码</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/pass_login')">账号密码登录</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/sms_login')">手机验证码登录</view>
			</view>
		</view>
		<!--  #endif -->

		<!--H5登录-->
		<!-- #ifdef H5 -->
		<view class="form">
			<view v-if="type=='login'">
				<view class="login-img" v-if="environment.isWeChat">
					<image class="img-btn" :src="imgHost+'/static/images/icon/wx.png'" @click="authorization"></image>
				</view>
				<view class="login-img" v-else-if="environment.isAlipay">
					<image class="img-btn" :src="imgHost+'/static/images/icon/zfb.png'" @click="authorization"></image>
				</view>
				<view class="login-img" v-else-if="environment.isDouyin">
					<image class="img-btn" :src="imgHost+'/static/images/icon/dy.png'" @click="authorization"></image>
				</view>
				<view v-else>
					<view class="form-item">
						<uni-icons type="icon-iconfontuser" custom-prefix="iconfont" size="24"
							:color="themeColor.theme"></uni-icons>
						<view class="form-input">
							<input v-model="form.mobile" style="padding: 0 32rpx" type="text" placeholder="请输入您的手机号" />
						</view>
					</view>
					<view class="form-item">
						<uni-icons type="icon-iconfonticon-mim" custom-prefix="iconfont" size="24"
							:color="themeColor.theme"></uni-icons>
						<view class="form-input">
							<input v-model="form.password" type="password" style="padding: 0 32rpx"
								placeholder="请输入您的密码" />
						</view>
					</view>
					<button :loading="loginButton" class="u-button" @click="login()" type="warning" shape="circle"
						:style="{background: themeColor.theme, color: '#fff'}">
						登录
					</button>
				</view>
			</view>
			<view v-else>
				<view class="form-item">
					<uni-icons type="icon-iconfontuser" custom-prefix="iconfont" size="24"
						:color="themeColor.theme"></uni-icons>
					<view class="form-input">
						<input v-model="form.mobile" style="padding: 0 32rpx" type="text" placeholder="请输入您的手机号" />
					</view>
				</view>
				<view class="form-item">
					<uni-icons type="icon-iconfont5" custom-prefix="iconfont" size="24"
						:color="themeColor.theme"></uni-icons>
					<view class="form-input">
						<input v-model="form.verify_code" style="padding: 0 32rpx" type="text" placeholder="请输入验证码" />
						<button @click="getCode()" size="mini">{{codeMsg}}</button>
					</view>
				</view>
				<view class="form-item">
					<uni-icons type="icon-iconfonticon-mim" custom-prefix="iconfont" size="24"
						:color="themeColor.theme"></uni-icons>
					<view class="form-input">
						<input v-model="form.password" type="password" style="padding: 0 32rpx" placeholder="请输入您的密码" />
					</view>
				</view>

				<!-- 邀请码:注册才有 -->
				<view class="form-item">
					<uni-icons type="icon-huiyuan" custom-prefix="iconfont" size="24"
						:color="themeColor.theme"></uni-icons>
					<view class="form-input">
						<input v-model="form.invite_code" type="text" style="padding: 0 32rpx" placeholder="请输入邀请码" />
					</view>
				</view>
				<button :loading="loginButton" class="u-button" @click="register()" type="warning" shape="circle"
					:style="{background: themeColor.theme, color: '#fff'}">
					注册
				</button>
			</view>

			<view class="alink">
				<radio :checked="read" @click="setRead" />
				已阅读并同意
				<text @click="pageRoute(`/userPages/agreement/agreement?type=user`)">《用户协议》</text>
				<text @click="pageRoute(`/userPages/agreement/agreement?type=privacy`)">《隐私协议》</text>
			</view>

			<view class="btn-group" v-if="type=='login'">
				<view class="login-btn" style="color:#1866d9;" @click="pageRoute('/userPages/login/forgot-password')">
					忘记密码</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/pass_login')">账号密码登录</view>
				<text>|</text>
				<view class="login-btn" @click="pageRoute('/userPages/login/sms_login')">手机验证码登录</view>
			</view>
		</view>
		<!--  #endif -->

		<gyd-copyright></gyd-copyright>
	</view>
</template>

<script setup>
	import request from '@/utils/request';
	import cache from '@/utils/cache';
	import util from '@/utils/util';
	// #ifdef H5
	import checkEnvironment from '@/utils/browser.js';
	// #endif
	import {
		reactive,
		toRefs,
		inject,
		ref,
	} from 'vue';
	import {
		onLoad,
		onShow,
		onReady,
		onPullDownRefresh,
		onReachBottom,
	} from '@dcloudio/uni-app';

	const state = reactive({
		title: '授权登录',
		themeColor: cache.get('themeColor'),
		imgHost: util.requestUrl(),
		type: 'login',
		read: false,
		form: {
			mobile: '',
			verify_code: '',
			password: '',
			invite_code: '',
		},
		codeMsg: '获取验证码',
		loginButton: false,
		is_mobile_login: false,
		environment: {
			isWeChat: false,
			isAlipay: false,
			isBrowser: false,
			isDouyin: false,
		}, //浏览器环境
	});

	//在页面所有元素加载完成后执行（只执行一次）
	onLoad((opt) => {
		console.log('onLoad');
		if (opt.hasOwnProperty('type')) {
			state.type = opt.type;
		}
		if (opt.hasOwnProperty('invite_code')) {
			state.form.invite_code = opt.invite_code;
		}
		if (opt.hasOwnProperty('login_code')) {
			authorizedLogin(opt.login_code);
		}
		// #ifdef H5
		state.environment = checkEnvironment();
		console.log('浏览器环境', state.environment);
		// #endif
	});

	//在页面由不可见变为可见时执行（只要页面显示都会执行）
	onShow(() => {
		console.log('onShow');
	})

	//在页面解析完成之后执行
	onReady(() => {
		console.log('onReady');
	})

	onPullDownRefresh(() => {
		console.log('下拉刷新');
		setTimeout(() => {
			uni.stopPullDownRefresh();
		}, 1000);
	})

	onReachBottom(() => {
		console.log('触底加载更多');
	})

	function login() {
		console.log('账号密码登录');
		if (!state.read) {
			util.showTip('请先阅读并同意协议');
			return;
		}
		if (!util.mobile(state.form.mobile)) {
			return;
		}
		if (!util.username(state.form.password, '密码')) {
			return;
		}
		console.log('登录', state.form);
	}

	function register() {
		if (!state.read) {
			util.showTip('请先阅读并同意协议');
			return;
		}

		if (!util.mobile(state.form.mobile)) {
			return;
		}
		if (!util.username(state.form.password, '密码')) {
			return;
		}
		if (!util.username(state.form.verify_code, '验证码')) {
			return;
		}
		if (!util.username(state.form.invite_code, '邀请码')) {
			return;
		}
		console.log('register-注册', state.form);
	}

	function authorizedLogin(code) {
		console.log('授权登录', code);
	}

	function authorization(type) {
		if (!state.read) {
			util.showTip('请先阅读并同意协议');
			return;
		}

		// #ifdef APP
		if (type == 'wx') {
			console.log('微信APP登录');
		} else if (type == 'zfb') {
			console.log('支付宝APP登录');
		} else if (type == 'dy') {
			console.log('抖音APP登录');
		}
		// #endif

		// #ifdef MP-WEIXIN
		console.log('微信小程序登录');
		// #endif

		// #ifdef MP-TOUTIAO
		console.log('抖音小程序登录');
		// #endif

		// #ifdef MP-ALIPAY
		console.log('支付宝小程序登录');
		// #endif

		// #ifdef H5
		if (state.environment.isWeChat) {
			console.log('微信公众号登录');
		} else if (state.environment.isAlipay) {
			console.log('支付宝H5登录');
		} else if (state.environment.isDouyin) {
			console.log('抖音H5登录');
		} else {
			console.log('Web登录');
		}
		// #endif
	}

	const loginSussess = (res) => {
		console.log('登录成功');
		uni.hideLoading();
		util.showTip(res.msg);
		if (res.code == 1) {
			// 保存token
			util.setToken(res.data.token);
			// 保存登录用户信息
			util.setUser(res.data.user);
			// 事件通知
			uni.$emit('login_success');
			// 延迟后，跳转页面
			setTimeout(function() {
				pageTabRoute('/pages/tabbar/profile/profile');
			}, 800);
		}
	}

	function setRead() {
		state.read = !state.read;
	}

	function pageRoute(url) {
		uni.navigateTo({
			url
		});
	}

	function pageTabRoute(url) {
		uni.reLaunch({
			url
		});
	}

	const {
		title,
		themeColor,
		imgHost,
		type,
		read,
		form,
		codeMsg,
		loginButton,
		is_mobile_login,
		environment,
	} = toRefs(state);
</script>

<style lang="scss">
	page {
		overflow: hidden;
		height: 100%;
		background-color: $u-bg-reverse-color;
	}

	.login {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 48rpx 48rpx 0;

		.logo {
			margin-top: 85rpx;
			padding-bottom: 50rpx;

			image {
				width: 400rpx;
				height: 400rpx;
			}
		}

		.form {
			flex: 1;
			width: 100%;
			margin-top: $m48;

			.login-img {
				display: flex;
				justify-content: center;

				.img-btn {
					width: 100rpx;
					height: 100rpx;
				}
			}

			.form-item {
				@include f-between;
				height: 70rpx;
				padding: 0 $m16;
				background-color: $u-bg-color;
				margin-bottom: $m24;
				border-radius: 40rpx;

				.form-input {
					@include f-between;
					flex: 1;
					margin: 0 $m16;

					input {
						flex: 1;
					}
				}
			}

			.login-img {
				display: flex;
				margin: 30rpx auto;
				justify-content: center;

				.img-item {
					margin-left: 10rpx;
					width: 100rpx;
					height: 100rpx;
				}
			}

			.alink {
				@include f-center;
				padding: $m24;
				font-size: 24rpx;

				text {
					margin: 0 $m12;
					font-size: 24rpx;
					color: #125cd7;
				}
			}

			.btn-group {
				width: 100%;
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				margin: $m24 0 0 0;

				.login-btn {
					color: #1866d9;
				}

				text {
					margin: 0 20rpx;
					color: #1866d9;
				}
			}
		}

		.copyright {
			@include f-center(column);
			padding: $m48;

			text {
				font-size: 24rpx;
				color: #9fa0a2;
			}

			.u-icon {
				margin-top: $m32;
			}
		}
	}
</style>